<template>
	<view>
		<u-navbar
			safeAreaInsetTop
			fixed
			leftIconColor="#fff"
			leftText="景点播报"
			:autoBack="true"
			bgColor="transparent"
		/>
		
		<view class="swiper-content" v-if="!show">
			<swiper class="swiper" :current="current" :duration="500" :interval="2000" :indicator-dots="false" autoplay  circular @change="setCurrent">
				<swiper-item v-for="item, index in 1" :key="index" :item-id="index">
					<view class="swiper-item-img-box">
						<img :src="detail.jingquPictureUrl || ''" alt="">
						<view class="swiper-item-img-index">{{`${index + 1}/1`}}</view>
					</view>
				</swiper-item>
				<!-- <swiper-item v-for="item, index in 6" :key="index" :item-id="index">
					<view class="swiper-item-img-box">
						<img src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" alt="">
						<view class="swiper-item-img-index">{{`${index + 1}/6`}}</view>
					</view>
				</swiper-item> -->
			</swiper>
			<!-- <img class="swiper-sc" :src="sc" alt=""> -->
			<img class="swiper-full" :src="full" @click="previewImage" alt="">
		</view>
		<view class="swiper" v-show="show"></view>
		<view class="view-list-box">
			<view class="view-list-title">{{detail.jingquName}}景区景点讲解</view>
			<view class="list-content">
				<view class="list-item" v-for="item, index in dataList" :key="index">
					<view class="left">
						<view class="item-title">{{item.title}}</view>
						<view class="item-desc">{{item.name}}分钟</view>
					</view>
					<img v-if="!item.tag" :src="start" @click="play(index, true)" alt="">
					<img v-else :src="end" @click="play(index, false)" alt="">
				</view>
			</view>
		</view>
			<u-popup
				:overlayOpacity="1"
				:customStyle="{ width: '100%'}"
				:show="show" safeAreaInsetTop mode="center" @close="stop" closeable>
				<view class="file-type-box">
					<video v-if="current.fileType == '1'" autoplay id="myVideo" :src="current.url" controls></video>
					<audio v-else style="text-align: left" :src="current.url" :name="current.title"></audio>
				</view>
			</u-popup>
		
	</view>
</template>

<script>
import {getJingDianByJingQuIdApi, getDetailsByJingquIdAPI} from '@/api/jingqu/index';
import full from '@/static/images/view/full.png';
import end from '@/static/images/view/end.png';
import start from '@/static/images/view/start.png';
import sc from '@/static/images/view/sc.png';
	export default {
		data() {
			return {
				currentImg: 0,
				full,
				end,
				start,
				sc,
				show: false,
				detail: {},
				innerAudioContext: undefined,
				current: {},
				dataList: []
			}
		},
		onLoad(options) {
			if (options?.id) {
				this.getJdList(options?.id)
				this.getDetail(options?.id)
			}
		},
		methods: {
			// back () {
			// 	uni.navigateBack()
			// },
			timeChange (value) {
				let h = Math.floor(value / 3600)
				let m = Math.floor((value / 60) % 60)
				let s = Math.floor(value % 60)
			
				let str = ''
				if (h !== 0) str += `${h}:`
				if (m !== 0) str += `${m}:`
				str += `${s}`
				return str
			},
			play(i, tag) {
				let current = {};
				this.dataList = this.dataList.map((item, index) => {
					index === i && (current = item)
					return {
						...item,
						tag: index === i ? tag : item.tag
					}
				})
				this.current = tag ? current : {};
				if (current.fileType == '2') {
					if (tag) {
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.src = current.url;
						// this.innerAudioContext.autoplay = true;
						this.innerAudioContext.play();
					} else {
						this.innerAudioContext.stop();
						this.innerAudioContext.destroy();
					}
				} else {
					this.show = true
				}
			},
			stop() {
				this.dataList = this.dataList.map((item) => {
					return {
						...item,
						tag: this.current.jingdianId === item.jingdianId ? false : item.tag
					}
				})
				this.current = {};
				this.show = false
			},

			setCurrent (e) {
				this.currentImg = e.target.current;
			},
			getJdList(id) {
				getJingDianByJingQuIdApi(id).then(res => {
					this.dataList = res?.data?.map(item => {
						return {
							title: item.jingdianName + (item?.fileType == '1' ? '视频': '语音') + '播报',
							url: item?.jingdianFile,
							fileType: item?.fileType,
							jingdianId: item?.jingdianId,
							name: this.timeChange(item?.duration || 0),
							tag: false,
						}
					})
				})
			},
			getDetail(id) {
				getDetailsByJingquIdAPI(id).then(res => {
					console.log(res);
					this.detail = res?.data || {}
				})
			},
			previewImage() {
				// console.log(this.imageList);
				// console.log(this.current);
				uni.previewImage({
					urls: [this.detail.jingquPictureUrl],
					current: this.currentImg,
					// indicator: this.currentIndicator,
					loop: true
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
.swiper-content {
	position: relative;
	.swiper{
		height: 400rpx;
		.swiper-item-img-box {
			position: relative;
			img{
				position: relative;
				height: 400rpx;
				width: 100%;
			}
			.swiper-item-img-index{
				position: absolute;
				left: 28rpx;
				bottom: 20rpx;
				height: 48rpx;
				background: #000000;
				border-radius: 24rpx;
				line-height: 48rpx;
				opacity: 0.7;
				padding: 0 24rpx;
				color: #fff;
			}
		}
	}
	.swiper-sc, .swiper-full {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.swiper-sc {
		right: 100rpx;
	}
}
.file-type-box {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	video {
		width: 100%;
	}
}
.view-list-box{
	background-color: #F3F3F3;
	padding: 26rpx 0 40rpx;
	height: calc(100vh - 400rpx);
	.view-list-title {
		position: relative;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3D3D3D;
		line-height: 50rpx;
		padding-left: 40rpx;
		margin-bottom: 24px;
		&::after {
			content: '';
			height: 100%;
			position: absolute;
			width: 12rpx;
			left: 14rpx;
			top: 0;
			border-radius: 12rpx;
			background-color: #0E9589;
		}
	}
	.list-content {
		padding: 0 32rpx 24rpx;
		height: calc(100% - 100rpx);
		overflow: hidden;
		overflow-y: auto;
		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			.item-title {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
				padding-bottom: 12rpx;
			}
			.item-title {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			img {
				width: 64rpx;
				height: 64rpx;
				margin-right: 24rpx;
			}
		}
	}
}

</style>
